<template>
  <div class="ddtop">
    <!--头部开始-->
    <div class="back"></div>
    <div class="header">
      <div class="head">
        <div class="head-left">
          <span>欢迎进入万力达消防设备大卖场官网</span>
        </div>
        <div class="head-right">
          <p><router-link to="/page/about?num=6">在线留言</router-link></p>
          <p style="cursor: pointer" @click="addFavo">收藏本站</p>
          <p><router-link to="/page/about?num=5">网站地图</router-link></p>
        </div>
      </div>
      <div class="top">
        <div class="logo">
          <img
            class="jpg1"
            :src="configData.logo"
            alt="icons"
            title="logo"
          />
          <div class="wan">
            <p class="wld">万力达消防设备大卖场</p>
            <p class="xf">专注消防设备卖场20年</p>
          </div>
        </div>
        <div class="iphone">
          <img
            class="jpg2"
            src="../assets/logo_06.jpg"
            alt="icons"
            title="电话"
          />
          <div class="fu">
            <p class="re">服务热线:</p>
            <p class="tell">{{configData.mobile}}</p>
          </div>
        </div>
      </div>
    </div>
    <!--头部结束-->
    <!--导航栏开始-->
    <div class="bodder">
      <nav>
        <ul>
          <li :class="navIndex == 0 ? 'activez' : ''">
            <router-link to="/">首页</router-link>
            <!-- <a href="#">首页</a> -->
          </li>
          <li :class="{ activez: navIndex === 1 }">
            <router-link to="/page/details?num=0">消防水泵</router-link>
            <!-- <a href="#">消防水泵</a> -->
          </li>
          <li :class="{ activez: navIndex === 2 }">
            <router-link to="/page/details?num=1">水泵控制柜</router-link>
            <!-- <a href="#">水泵控制柜</a> -->
          </li>
          <li :class="{ activez: navIndex === 3 }">
            <router-link to="/page/details?num=2">气体灭火</router-link>
            <!-- <a href="#">气体灭火</a> -->
          </li>
          <li :class="{ activez: navIndex === 4 }">
            <router-link to="/page/details?num=3">火灾报警</router-link>
            <!-- <a href="#">火灾报警</a> -->
          </li>
          <li :class="{ activez: navIndex === 5 }">
            <router-link to="/page/details">产品中心</router-link>
            <!-- <a href="#">产品中心</a> -->
          </li>
          <li :class="{ activez: navIndex === 6 }">
            <router-link to="/page/witness">客户见证</router-link>
            <!-- <a href="#">客户见证</a> -->
          </li>
          <li :class="{ activez: navIndex === 7 }">
            <router-link to="/page/news">新闻动态</router-link>
            <!-- <a href="#">新闻动态</a> -->
          </li>
          <li :class="{ activez: navIndex === 8 }">
            <router-link to="/page/about">关于我们</router-link>
            <!-- <a href="#"></a> -->
          </li>
        </ul>
      </nav>
    </div>
    <!--导航栏结束-->
  </div>
</template>

<script>
export default {
  name: "NavTab",
  components: {},
  props: {
    navIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      message: "",
      // navIndex: 0,
      configData: {}
    };
  },
  created() {
    // if (localStorage.getItem("navIndex")) {
    //   this.navIndex = +localStorage.getItem("navIndex");
    //   console.log(this.navIndex);
    // }
    // if (
    //   navigator.userAgent.match(
    //     /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    //   )
    // ) {
    //   this.$router.push("/page/home_mobile");
    // } else {
    //   this.$router.push("/");
    // }
  },
  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route: {
      handler: function (val, oldVal) {
        console.log(val);
      },
      // 深度观察监听
      deep: true,
    },
  },
  watch: {},
  mounted() {
    // if (localStorage.getItem("navIndex")) {
    //   this.navIndex = +localStorage.getItem("navIndex");
    //   console.log(this.navIndex);
    // }
    this.getConfig()
  },
  methods: {
    // selNav(a) {
    //   this.navIndex = a;
    //   localStorage.setItem("navIndex", this.navIndex);
    //   console.log(a, this.navIndex);
    // },
    addFavo() {
      // let browser = browser||chrome
      // browser.bookmarks.create({
      //   title: document.title,
      //   url: document.URL
      // }).then(
      //   console.log('created')
      // )
      // window.external.AddFavorite('http://test.wld119.com/#/','万力达大卖场')
    },
    getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped>
/* 头部开始*/
.back {
  width: 100%;
  min-width: 1200px;
  height: 30px;
  background: #0d76ca;
}
.header {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
}
.head {
  width: 1200px;
  line-height: 30px;
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.head-left,
.head-right {
  overflow: hidden;
  display: flex;
}
.head-left span {
  color: #fff;
  font-size: 10px;
}
.head-right p {
  color: #fff;
  font-size: 10px;
  margin-left: 10px;
}
.head-right a {
  color: #fff;
}
.top {
  margin-top: 1em;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.logo,
.iphone {
  overflow: hidden;
  display: flex;
}
.logo img {
  width: 95px;
}
.iphone img {
  width: 60px;
}
.wld {
  font-size: 19px;
  color: #333;
  font-weight: bold;
  margin-top: 3%;
}
.xf {
  margin-top: 10px;
  font-size: 15px;
  font-style: normal;
  color: #333;
}
.wan {
  margin-left: 10px;
}
.fu {
  margin-left: 10px;
}
.re {
  font-size: 18px;
  color: #0361ab;
  font-style: normal;
  margin-left: -60px;
}
.tell {
  font-size: 23px;
  font-family: arial;
  color: #0361ab;
  font-style: normal;
}
/* 头部结束*/
/* 导航栏开始*/
.bodder{
  width: 100%;
  border-top: 1px solid #ededed;
  border-bottom: 1px solid #ededed;
}
nav {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
}
nav li{
  border-right: 1px solid #ededed;
}
nav li:last-child {
  border-right: 0px;
}
nav a {
  font-size: 15px;
  display: block;
  line-height: 60px;
  padding-left: 36.5px;
  padding-right: 36.5px;
}
.activez {
  color: #fff;
  background: #d6af62;
}
.activez a {
  color: #fff;
}
/* 导航栏结束*/
</style>
